<body>
    <h1>regitrar funcionario!</h1>
    <br /><br />
    <div id="mytabs">
        <ul id="tablist">
            <li id="tabs-1-tab"><a href="#tabs-1">Datos Funcionarios</a></li>
        </ul>
        <div id="tabs-1">
            <table align="center">
                <tr>
                    <td>
                        Placa
                    </td>
                    <td>
                        <input name="placa_funcionario" id="placa_funcionario"/>
                    </td>
                </tr>
                <tr>
                    <td>
                        Cedula
                    </td>								
                    <td>
                        <input name="cedula" id="cedula"/>
                    </td>
                </tr>
                <tr>
                    <td>
                        Nombre
                    </td>								
                    <td>
                        <input name="nombre" id="nombre"/>
                    </td>
                </tr>
                <tr>
                    <td>
                        Apellido
                    </td>								
                    <td>
                        <input name="apellido" id="apellido"/>
                    </td>
                </tr>
                <tr>
                    <td>
                        Sexo
                    </td>								
                    <td>
                        <select name="sexo" id="sexo" style="width: 182px">
                            <option value="seleccione">seleccione</option>
                            <option value="Masculino">Masculino</option>
                            <option value="Femenino">Femenino</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>
                        Telefono
                    </td>								
                    <td>
                        <input name="telefono" id="telefono"/>
                    </td>
                </tr>
                <tr>
                    <td>
                        Jerarquia
                    </td>								
                    <td>
                        <select name="jerarquia" id="jerarquia" style="width: 182px">
                            <option value="seleccione">seleccione</option>
                            <option value="Distinguido">Distinguido</option>
                            <option value="Cabo I">Cabo I</option>
                            <option value="Cabo II">Cabo II</option>
                            <option value="Sargento I">Sargento I</option>
                            <option value="Sargento II">Sargento II</option>
                            <option value="Sargento Mayor">Sargento Mayor</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>
                        F Nacimiento
                    </td>								
                    <td>
                        <input name="fecha_naci" id="fecha_naci"/>
                    </td>
                </tr>
                <tr>
                    <td>
                        Direccion
                    </td>								
                    <td>
                        <textarea name="direccion" id="direccion" rows="5" cols="18"></textarea>
                    </td>
                </tr>
                <tr>
                </tr>
                <tr>
                    <td>
                        <p>
                            <span class="art-button-wrapper">
                                <span class="art-button-l"> </span>
                                <span class="art-button-r"> </span>
                                <a style="cursor: pointer;" class="art-button" href="javascript:guardar()">Guardar</a>
                            </span>
                        </p>
                    </td>
                    <td>
                        <p>
                            <span class="art-button-wrapper">
                                <span class="art-button-l"> </span>
                                <span class="art-button-r"> </span>
                                <a class="art-button" style="cursor: pointer;" href="javascript:limpiar()">Limpiar</a>
                            </span>
                        </p>
                    </td>
                </tr>
            </table>
            <div id="respuesta"></div> 

        </div>
    </div>
    <script>
        function limpiar(){
            $("#placa_funcionario").get(0).value=""
            $("#cedula").get(0).value = ""
            $("#nombre").get(0).value= ""
            $("#apellido").get(0).value= ""
            $("#sexo").get(0).value= ""
            $("#telefono").get(0).value= ""
            $("#jerarquia").get(0).value= ""
            $("#fecha_naci").get(0).value= ""
            $("#direccion").get(0).value= ""
            $("#respuesta").html("")
        }
        function guardar(){			
           
            //Con jquery obtengo los id de cada input que estan en mi pagina html.
            var params = {placa_funcionario: $("#placa_funcionario").get(0).value,
                cedula: $("#cedula").get(0).value,
                nombre: $("#nombre").get(0).value,
                apellido: $("#apellido").get(0).value,
                sexo: $("#sexo").get(0).value,
                telefono: $("#telefono").get(0).value,
                jerarquia: $("#jerarquia").get(0).value,
                fecha_naci: $("#fecha_naci").get(0).value,
                direccion: $("#direccion").get(0).value,
                accion : 'registrar'
            }			
            $("#respuesta").load("../controladores/FuncionarioControlador.php", params, function(){	
                
                console.log("recibidos los datos por ajax");
            });
        }
        //Este codigo define el calendario en el formulario
        $("#fecha_naci" ).datepicker({
            showOn: "button",
            buttonImage: "../images/calendar.gif",
            buttonImageOnly: true,
            changeMonth: true,
            changeYear: true,
            dateFormat: 'yy-mm-dd',
            regional: 'es'
        });
        
        //Este codigo define el tab en el formulario
        $("#mytabs" ).tabs();
	
    </script>  
</body>
